<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置管理</title>
    <link rel="stylesheet" href="../styles/styles-main.css">

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="../modules/module-loader.js"></script>
    <script src="../modules/core-modules.js"></script>
    <script>
        // 动态加载系统设置所需模块
        document.addEventListener('DOMContentLoaded', async function() {
            try {
                await moduleLoader.loadModules([
                    ['api-client', '../scripts/api-client.js'],
                    ['navbar-main', '../scripts/navbar-main.js'],
                    ['sidebar-manager', '../scripts/sidebar-manager.js'],
                    ['system-settings', '../scripts/system-settings.js'],
                    ['i18n-manager', '../scripts/i18n-manager.js']
                ]);
                
                // 初始化系统设置
                if (typeof SystemSettingsManager !== 'undefined') {
                    const systemSettings = new SystemSettingsManager();
                    systemSettings.init();
                }
            } catch (error) {
                console.error('模块加载失败:', error);
            }
        });
    </script>
    <style>
        .sidebar a {
            display: block;
            padding: 12px 20px;
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            transition: all 0.3s;
            border-left: 3px solid transparent;
        }

        .sidebar a:hover,
        .sidebar a.active {
            background: rgba(255,255,255,0.1);
            color: white;
            border-left-color: #667eea;
        }

        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        /* 页面标题和操作区 */
        .page-header {
            background: white;
            border-radius: 12px;
            padding: 20px 30px;
            margin-bottom: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .header-title {
            font-size: 24px;
            font-weight: 600;
            color: #1a1a1a;
            margin: 0;
        }

        .header-controls {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .security-alert {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 6px;
            padding: 8px 15px;
            font-size: 12px;
            color: #856404;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .save-all-btn {
            background: #28a745;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .save-all-btn:hover {
            background: #218838;
            transform: translateY(-1px);
        }

        .reset-btn {
            background: #6c757d;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }

        .reset-btn:hover {
            background: #545b62;
        }

        /* 设置面板样式 */
        .settings-panel {
            background: white;
            border-radius: 12px;
            padding: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            margin-bottom: 30px;
            border: 1px solid #e9ecef;
        }

        .panel-header {
            padding: 20px 30px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .panel-title {
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .panel-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #667eea;
            color: white;
        }

        .panel-toggle {
            background: none;
            border: none;
            cursor: pointer;
            color: #666;
            font-size: 16px;
        }

        .panel-body {
            padding: 30px;
        }

        .settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }

        .form-control {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e9ecef;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
            box-sizing: border-box;
        }

        .form-control:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
        }

        .form-control.error {
            border-color: #dc3545;
        }

        .form-help {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .toggle-slider {
            background-color: #28a745;
        }

        input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }

        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #007bff;
            color: white;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-success {
            background: #28a745;
            color: white;
        }

        .btn:hover {
            transform: translateY(-1px);
        }

        .backup-list {
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 10px;
        }

        .backup-item {
            padding: 8px 12px;
            border-bottom: 1px solid #f8f9fa;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .backup-item:last-child {
            border-bottom: none;
        }

        .log-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        .log-table th,
        .log-table td {
            padding: 8px 12px;
            border: 1px solid #e9ecef;
            text-align: left;
            font-size: 12px;
        }

        .log-table th {
            background: #f8f9fa;
            font-weight: 600;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .settings-grid {
                grid-template-columns: 1fr;
            }
            
            .header-controls {
                width: 100%;
                justify-content: space-between;
            }
            
            .panel-body {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <main class="content">
            <div class="system-container">
                <!-- 页面标题和操作区 -->
                <div class="page-header">
                    <div class="header-left">
                        <h1 class="header-title">系统设置管理</h1>
                    </div>
                    <div class="header-controls">
                        <div class="security-alert">
                            <i class="fas fa-shield-alt"></i>
                            系统设置涉及核心功能，请谨慎操作
                        </div>
                        <button class="reset-btn" onclick="systemSettingsManager.resetToDefaults()">
                            <i class="fas fa-undo"></i> 恢复默认
                        </button>
                        <button class="save-all-btn" onclick="systemSettingsManager.saveAllSettings()">
                            <i class="fas fa-save"></i> 保存所有设置
                        </button>
                    </div>
                </div>

                <!-- 基础全局配置 -->
                <div class="settings-panel">
                    <div class="panel-header">
                        <div class="panel-title">
                            <div class="panel-icon">
                                <i class="fas fa-cog"></i>
                            </div>
                            <span>基础全局配置</span>
                        </div>
                        <button class="panel-toggle" onclick="togglePanel('basicConfig')">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </div>
                    <div class="panel-body" id="basicConfig">
                        <div class="settings-grid">
                            <div class="form-group">
                                <label for="websiteTitle">网站标题名称</label>
                                <input type="text" id="websiteTitle" class="form-control" placeholder="请输入网站标题名称">
                                <div class="form-help">显示在浏览器标题和系统界面中的网站名称</div>
                            </div>
                            <div class="form-group">
                                <label for="websiteDescription">网站简介</label>
                                <textarea id="websiteDescription" class="form-control" rows="3" placeholder="请输入网站简介..."></textarea>
                                <div class="form-help">网站的简短描述，用于SEO和社交媒体分享</div>
                            </div>
                            <div class="form-group">
                                <label for="logoUpload">网站Logo</label>
                                <div style="display: flex; align-items: center; gap: 10px;">
                                    <input type="file" id="logoUpload" class="form-control" accept="image/*" style="flex: 1;">
                                    <button type="button" class="btn btn-secondary" onclick="systemSettingsManager.uploadLogo()" style="white-space: nowrap;">
                                        <i class="fas fa-upload"></i> 上传
                                    </button>
                                </div>
                                <div class="form-help">支持PNG、JPG格式，建议尺寸：200x60像素</div>
                                <div id="logoPreview" style="margin-top: 10px; display: none;">
                                    <img id="previewImage" style="max-width: 200px; max-height: 60px; border: 1px solid #ddd; border-radius: 4px;">
                                    <button type="button" class="btn btn-danger" onclick="systemSettingsManager.removeLogo()" style="margin-left: 10px;">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="domain">默认访问地址</label>
                                <input type="url" id="domain" class="form-control" placeholder="https://example.com">
                                <div class="form-help">系统的主域名或IP地址</div>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- 功能模块配置 -->
                <div class="settings-panel">
                    <div class="panel-header">
                        <div class="panel-title">
                            <div class="panel-icon">
                                <i class="fas fa-puzzle-piece"></i>
                            </div>
                            <span>功能模块配置</span>
                        </div>
                        <button class="panel-toggle" onclick="togglePanel('moduleConfig')">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </div>
                </div>

                <!-- 数据与运维设置 -->
                <div class="settings-panel">
                    <div class="panel-header">
                        <div class="panel-title">
                            <div class="panel-icon">
                                <i class="fas fa-database"></i>
                            </div>
                            <span>数据与运维设置</span>
                        </div>
                        <button class="panel-toggle" onclick="togglePanel('dataConfig')">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </div>
                    <div class="panel-body" id="dataConfig">
                        <div class="settings-grid">
                            <div class="form-group">
                                <label>自动备份</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="autoBackupEnabled" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">开启/关闭系统自动备份功能</div>
                            </div>
                            <div class="form-group">
                                <label for="backupInterval">备份周期</label>
                                <select id="backupInterval" class="form-control">
                                    <option value="daily">每日</option>
                                    <option value="weekly">每周</option>
                                    <option value="monthly">每月</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>系统缓存</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="cacheEnabled" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">开启/关闭系统缓存功能</div>
                            </div>
                            <div class="form-group">
                                <label for="cacheExpiry">缓存有效期(分钟)</label>
                                <input type="number" id="cacheExpiry" class="form-control" min="1" max="1440" value="30">
                            </div>
                            <div class="form-group">
                                <label>手动备份管理</label>
                                <div class="btn-group">
                                    <button class="btn btn-primary" onclick="systemSettingsManager.createBackup()">
                                        <i class="fas fa-download"></i> 立即备份
                                    </button>
                                    <button class="btn btn-secondary" onclick="systemSettingsManager.clearCache()">
                                        <i class="fas fa-broom"></i> 清理缓存
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 多语言站点设置 -->
                <div class="settings-panel">
                    <div class="panel-header">
                        <div class="panel-title">
                            <div class="panel-icon">
                                <i class="fas fa-globe"></i>
                            </div>
                            <span>多语言站点设置</span>
                        </div>
                        <button class="panel-toggle" onclick="togglePanel('languageConfig')">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </div>
                    <div class="panel-body" id="languageConfig">
                        <div class="settings-grid">
                            <div class="form-group">
                                <label>多语言支持</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="multilingualEnabled">
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">开启/关闭网站多语言功能</div>
                            </div>
                            <div class="form-group">
                                <label for="defaultLanguage">默认语言</label>
                                <select id="defaultLanguage" class="form-control">
                                    <option value="zh-CN">简体中文</option>
                                    <option value="zh-TW">繁体中文</option>
                                    <option value="en-US">English (US)</option>
                                    <option value="en-GB">English (UK)</option>
                                    <option value="ja-JP">日本語</option>
                                    <option value="ko-KR">한국어</option>
                                    <option value="fr-FR">Français</option>
                                    <option value="de-DE">Deutsch</option>
                                    <option value="es-ES">Español</option>
                                    <option value="es-MX">Español (México)</option>
                                    <option value="pt-BR">Português (BR)</option>
                                    <option value="pt-PT">Português (PT)</option>
                                    <option value="ru-RU">Русский</option>
                                    <option value="ar-SA">العربية</option>
                                    <option value="hi-IN">हिन्दी</option>
                                    <option value="th-TH">ไทย</option>
                                    <option value="vi-VN">Tiếng Việt</option>
                                </select>
                                <div class="form-help">网站默认显示的语言</div>
                            </div>
                            <div class="form-group">
                                <label for="supportedLanguages">支持的语言</label>
                                <div style="border: 1px solid #e9ecef; border-radius: 6px; padding: 15px; background: #f8f9fa;">
                                    <div style="margin-bottom: 10px;">
                                        <label style="display: block; margin-bottom: 8px; font-weight: 600;">选择支持的语言：</label>
                                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;">
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="zh-CN" checked> 简体中文
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="zh-TW"> 繁体中文
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="en-US"> English (US)
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="en-GB"> English (UK)
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="ja-JP"> 日本語
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="ko-KR"> 한국어
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="fr-FR"> Français
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="de-DE"> Deutsch
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="es-ES"> Español
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="es-MX"> Español (México)
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="pt-BR"> Português (BR)
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="pt-PT"> Português (PT)
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="ru-RU"> Русский
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="ar-SA"> العربية
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="hi-IN"> हिन्दी
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="th-TH"> ไทย
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="supportedLanguage" value="vi-VN"> Tiếng Việt
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-help">勾选网站需要支持的语言</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="languageDetection">语言检测方式</label>
                                <select id="languageDetection" class="form-control">
                                    <option value="browser">浏览器语言检测</option>
                                    <option value="ip">IP地址地理位置检测</option>
                                    <option value="manual">手动选择</option>
                                    <option value="mixed">混合模式（优先浏览器检测）</option>
                                </select>
                                <div class="form-help">用户首次访问时的语言检测策略</div>
                            </div>
                            <div class="form-group">
                                <label for="languageSwitcherPosition">语言切换器位置</label>
                                <select id="languageSwitcherPosition" class="form-control">
                                    <option value="header">页面顶部</option>
                                    <option value="footer">页面底部</option>
                                    <option value="sidebar">侧边栏</option>
                                    <option value="floating">浮动按钮</option>
                                    <option value="hidden">隐藏（仅通过URL切换）</option>
                                </select>
                                <div class="form-help">语言切换器在页面中的显示位置</div>
                            </div>
                            <div class="form-group">
                                <label for="autoRedirect">自动重定向</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="autoRedirect" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">根据用户语言偏好自动重定向到对应语言版本</div>
                            </div>
                            <div class="form-group">
                                <label for="languageUrlFormat">语言URL格式</label>
                                <select id="languageUrlFormat" class="form-control">
                                    <option value="subdomain">子域名（en.example.com）</option>
                                    <option value="subdirectory">子目录（example.com/en/）</option>
                                    <option value="parameter">参数（example.com?lang=en）</option>
                                </select>
                                <div class="form-help">多语言页面的URL结构格式</div>
                            </div>
                            <div class="form-group">
                                <label>专有名词保护</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="protectProperNouns">
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">启用后，专有名词（如品牌名、产品名等）将不会被翻译</div>
                            </div>
                            <div class="form-group">
                                <label for="protectedNouns">受保护的专有名词</label>
                                <textarea id="protectedNouns" class="form-control" rows="4" placeholder="每行输入一个专有名词，例如：ubike, iPhone, Google"></textarea>
                                <div class="form-help">输入需要保护的专有名词，每行一个</div>
                            </div>
                            <div class="form-group">
                                <label>API翻译服务</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="apiTranslationEnabled">
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">启用/禁用API自动翻译功能</div>
                            </div>
                            <div class="form-group">
                                <label for="translationProvider">翻译服务提供商</label>
                                <select id="translationProvider" class="form-control">
                                    <option value="google">Google翻译（免费）</option>
                                    <option value="baidu">百度翻译</option>
                                    <option value="deepl">DeepL翻译</option>
                                    <option value="microsoft">微软翻译</option>
                                    <option value="tencent">腾讯翻译</option>
                                </select>
                                <div class="form-help">选择自动翻译使用的API服务</div>
                            </div>
                            <div class="form-group">
                                <label for="apiKey">API密钥</label>
                                <input type="password" id="apiKey" class="form-control" placeholder="请输入API密钥">
                                <div class="form-help">翻译服务的API密钥或访问令牌</div>
                            </div>
                            <div class="form-group">
                                <label for="apiSecret">API密钥（可选）</label>
                                <input type="password" id="apiSecret" class="form-control" placeholder="请输入API密钥（如果需要）">
                                <div class="form-help">某些服务需要额外的密钥或密码</div>
                            </div>
                            <div class="form-group">
                                <label>语言包管理</label>
                                <div class="btn-group">
                                    <button class="btn btn-primary" id="exportLanguagePackBtn">
                                        <i class="fas fa-download"></i> 导出语言包
                                    </button>
                                    <button class="btn btn-secondary" id="importLanguagePackBtn">
                                        <i class="fas fa-upload"></i> 导入语言包
                                    </button>
                                    <button class="btn btn-success" id="syncTranslationsBtn">
                                        <i class="fas fa-sync"></i> 同步翻译
                                    </button>
                                    <button class="btn btn-info" id="updateTranslationsBtn">
                                        <i class="fas fa-refresh"></i> 更新翻译文件
                                    </button>
                                </div>
                                <div class="form-help">管理网站的多语言翻译文件</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 博客多语言翻译设置 -->
                <div class="settings-panel">
                    <div class="panel-header">
                        <div class="panel-title">
                            <div class="panel-icon">
                                <i class="fas fa-language"></i>
                            </div>
                            <span>博客多语言翻译设置</span>
                        </div>
                        <button class="panel-toggle" onclick="togglePanel('blogTranslationConfig')">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </div>
                    <div class="panel-body" id="blogTranslationConfig">
                        <div class="settings-grid">
                            <div class="form-group">
                                <label>博客多语言翻译</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="blogTranslationEnabled" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">开启/关闭博客内容的多语言翻译功能</div>
                            </div>
                            <div class="form-group">
                                <label>自动翻译新博客</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="autoTranslateBlogs" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">创建新博客时自动翻译到所有支持的语言</div>
                            </div>
                            <div class="form-group">
                                <label for="blogTranslationLanguages">博客翻译支持语言</label>
                                <div style="border: 1px solid #e9ecef; border-radius: 6px; padding: 15px; background: #f8f9fa;">
                                    <div style="margin-bottom: 10px;">
                                        <label style="display: block; margin-bottom: 8px; font-weight: 600;">选择博客翻译支持的语言：</label>
                                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; max-height: 200px; overflow-y: auto;">
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="zh-CN" checked> 简体中文
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="zh-TW"> 繁体中文
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="en-US"> English (US)
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="en-GB"> English (UK)
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="ja-JP"> 日本語
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="ko-KR"> 한국어
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="fr-FR"> Français
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="de-DE"> Deutsch
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="es-ES"> Español
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="es-MX"> Español (México)
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="pt-BR"> Português (BR)
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="pt-PT"> Português (PT)
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="ru-RU"> Русский
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="ar-SA"> العربية
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="hi-IN"> हिन्दी
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="th-TH"> ไทย
                                            </label>
                                            <label style="display: flex; align-items: center; gap: 8px;">
                                                <input type="checkbox" name="blogTranslationLanguage" value="vi-VN"> Tiếng Việt
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-help">勾选博客内容需要支持翻译的语言</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="blogTranslationProvider">博客翻译服务</label>
                                <select id="blogTranslationProvider" class="form-control">
                                    <option value="google">Google翻译（推荐）</option>
                                    <option value="baidu">百度翻译</option>
                                    <option value="deepl">DeepL翻译</option>
                                    <option value="microsoft">微软翻译</option>
                                    <option value="tencent">腾讯翻译</option>
                                    <option value="openai">OpenAI翻译</option>
                                </select>
                                <div class="form-help">选择博客内容翻译使用的API服务</div>
                            </div>
                            <div class="form-group">
                                <label>翻译质量检查</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="translationQualityCheck" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">启用后会对翻译结果进行质量检查</div>
                            </div>
                            <div class="form-group">
                                <label>专有名词保护</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="blogProtectProperNouns" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">启用后，专有名词（如品牌名、产品名等）将不会被翻译</div>
                            </div>
                            <div class="form-group">
                                <label for="blogProtectedNouns">博客受保护的专有名词</label>
                                <textarea id="blogProtectedNouns" class="form-control" rows="4" placeholder="每行输入一个专有名词，例如：ubike, iPhone, Google">ubike, iPhone, Google, Microsoft, Apple, Samsung</textarea>
                                <div class="form-help">输入博客内容中需要保护的专有名词，每行一个</div>
                            </div>
                            <div class="form-group">
                                <label>博客翻译管理</label>
                                <div class="btn-group">
                                    <button class="btn btn-primary" onclick="systemSettingsManager.testBlogTranslation()">
                                        <i class="fas fa-test"></i> 测试翻译服务
                                    </button>
                                    <button class="btn btn-success" onclick="systemSettingsManager.batchTranslateBlogs()">
                                        <i class="fas fa-sync"></i> 批量翻译博客
                                    </button>
                                    <button class="btn btn-info" onclick="systemSettingsManager.viewTranslationStats()">
                                        <i class="fas fa-chart-bar"></i> 查看翻译统计
                                    </button>
                                </div>
                                <div class="form-help">管理博客的多语言翻译功能</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 安全防护设置 -->
                <div class="settings-panel">
                    <div class="panel-header">
                        <div class="panel-title">
                            <div class="panel-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <span>安全防护设置</span>
                        </div>
                        <button class="panel-toggle" onclick="togglePanel('securityConfig')">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                    </div>
                    <div class="panel-body" id="securityConfig">
                        <div class="settings-grid">
                            <div class="form-group">
                                <label>HTTPS强制启用</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="httpsEnabled">
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">强制使用HTTPS协议访问</div>
                            </div>
                            <div class="form-group">
                                <label>敏感数据加密</label>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="dataEncryptionEnabled" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                                <div class="form-help">对敏感数据进行加密存储</div>
                            </div>
                            <div class="form-group">
                                <label for="apiTimeout">接口请求超时(秒)</label>
                                <input type="number" id="apiTimeout" class="form-control" min="1" max="300" value="30">
                            </div>
                            <div class="form-group">
                                <label for="requestLimit">请求频率限制(次/分钟)</label>
                                <input type="number" id="requestLimit" class="form-control" min="10" max="1000" value="100">
                            </div>
                            <div class="form-group">
                                <label for="allowedIPs">IP白名单</label>
                                <textarea id="allowedIPs" class="form-control" rows="3" placeholder="每行输入一个IP地址"></textarea>
                                <div class="form-help">允许访问系统的IP地址，留空表示允许所有</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 模块化加载已在head部分完成 -->
    
    <script>
        // 添加调试信息
        console.log('系统设置页面加载完成');
        
        // 检查systemSettingsManager是否可用
        function checkSystemSettingsManager() {
            console.log('检查systemSettingsManager状态:');
            console.log('window.systemSettingsManager:', window.systemSettingsManager);
            console.log('typeof window.systemSettingsManager:', typeof window.systemSettingsManager);
            
            if (window.systemSettingsManager && typeof window.systemSettingsManager.exportLanguagePack === 'function') {
                console.log('✅ systemSettingsManager可用');
                return true;
            } else {
                console.log('❌ systemSettingsManager不可用');
                return false;
            }
        }
        
        // 页面加载后检查
        setTimeout(() => {
            checkSystemSettingsManager();
        }, 1000);
        
        // 添加测试函数
        function testLanguagePackButtons() {
            console.log('测试语言包按钮功能');
            
            if (window.systemSettingsManager) {
                console.log('尝试调用导出语言包...');
                try {
                    window.systemSettingsManager.exportLanguagePack();
                } catch (error) {
                    console.error('导出语言包失败:', error);
                }
            } else {
                console.log('systemSettingsManager未定义');
            }
        }

        // 直接测试文件选择器功能
        function testFileSelector() {
            console.log('开始测试文件选择器功能');
            
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = '.json,.txt';
            fileInput.style.display = 'none';
            
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    console.log('文件选择器工作正常，选择了文件:', file.name);
                    alert('文件选择器工作正常！选择了文件: ' + file.name);
                } else {
                    console.log('用户取消了文件选择');
                }
            });
            
            document.body.appendChild(fileInput);
            console.log('触发文件选择对话框');
            fileInput.click();
            
            setTimeout(() => {
                if (fileInput.parentNode) {
                    fileInput.parentNode.removeChild(fileInput);
                }
            }, 5000);
        }

        // 检查按钮事件监听器
        function checkButtonListeners() {
            console.log('检查按钮事件监听器状态:');
            
            const importBtn = document.getElementById('importLanguagePackBtn');
            if (importBtn) {
                console.log('找到导入按钮:', importBtn);
                console.log('按钮点击监听器数量:', importBtn._clickListeners ? importBtn._clickListeners.length : '未知');
                
                // 添加直接测试
                importBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    console.log('直接事件监听器被触发');
                    testFileSelector();
                });
            } else {
                console.log('未找到导入按钮');
            }
        }

        // 页面加载完成后检查按钮
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                checkButtonListeners();
            }, 2000);
        });
    </script>
</body>
</html>